<template>
	<div>
		<el-collapse v-model="activeNames" @change="handleCollapseChange">
			<el-collapse-item :name="item.id" v-for="(item, index) in items" :key="item.id" style="margin-bottom: 1px;">
				<template slot="title">
					<img src="@/assets/images/close-circle-fill.png"
						style="width: 20px;height: 20px;cursor: pointer;vertical-align: middle;position: absolute;right: 20px;"
						@click="removeItem(index)" title="移除" />
					<el-form-item label="执行时间:" >
						<el-time-picker is-range v-model="item.content.timeRange" range-separator="-"
							start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
							value-format="HH:mm:ss">
						</el-time-picker>
					</el-form-item>

				</template>

				<div class="station-function" style="width: 800px;">
					<div class="station-li" style="margin-top: 10px;">
						<div class="flex p_20">
							<el-form-item label="发送频率:" >
								<el-input-number style="width: 100px;" placeholder="MHz" v-model="item.content.freq"
									class="blank-input m-10" :controls="false"></el-input-number><span
									class="unit">MHz</span>
							</el-form-item>
							<el-form-item label="功率:" >
								<el-input-number :controls="false" style="width: 100px;" placeholder="0"
									v-model="item.content.power" class="blank-input m-10"></el-input-number>
							</el-form-item>
							<el-form-item label="通道:" >
								<el-input-number :controls="false" style="width: 100px;" placeholder="0"
									v-model="item.content.channel" class="blank-input m-10"></el-input-number>
							</el-form-item>
						</div>
					</div>

					<div class="station-li" style="margin-top: 10px;">
						<div class="flex p_20">
							<el-form-item label="编码:" >
								<el-input style="width: 100px;" placeholder="编码方式" v-model="item.content.encode"
									class="blank-input m-10"></el-input>
							</el-form-item>
							<el-form-item label="模式:" >
								<el-input style="width: 100px;" placeholder="发射模式" v-model="item.content.mode"
									class="blank-input m-10"></el-input>
							</el-form-item>
							<el-form-item label="重复:" >
								<el-input style="width: 100px;" placeholder="重复次数" v-model="item.content.sendTimes"
									class="blank-input m-10">次</el-input>
							</el-form-item>


							<!-- <div class="lh-40 w-30 t-rihgt">编码:</div>
							<el-input style="width: 100px;" placeholder="编码方式" v-model="item.content.encode"
								class="blank-input m-10"></el-input>
							<div class="lh-40 t-rihgt" style="margin-right: 60px;"></div>
							<div class="lh-40 t-rihgt">模式:</div>
							<el-input style="width: 100px;" placeholder="发射模式" v-model="item.content.mode"
								class="blank-input m-10"></el-input>
							<div class="lh-40 w-30 t-rihgt">重复:</div>
							<el-input style="width: 100px;" placeholder="重复次数" v-model="item.content.sendTimes"
								class="blank-input m-10">次</el-input> -->
						</div>
					</div>

					<div class="station-li" style="margin-top: 10px;">
						<div class="flex p_20">
							<el-form-item label="发送采样率:" >
								<el-input-number :controls="false" style="width: 100px;" placeholder="KHz"
									v-model="item.content.sampleFreq" class="blank-input m-10"></el-input-number><span
									class="unit">KHz</span>
							</el-form-item>
							<el-form-item label="接收频率:" >
								<el-input-number :controls="false" style="width: 100px;" placeholder="接收频率"
									v-model="item.content.rcvFreq" class="blank-input m-10"></el-input-number><span
									class="unit">MHz</span>
							</el-form-item>
							<el-form-item label="接收采样率:" >
								<el-input-number :controls="false" style="width: 100px;" placeholder="接收采样率"
									v-model="item.content.rcvSampleFreq" class="blank-input m-10"></el-input-number><span
									class="unit">KHz</span>
							</el-form-item>
						</div>
					</div>

					<div class="station-li" style="margin-top: 10px;">
						<div class="flex p_20">
							<el-form-item label="内容:" >
								<el-select v-model="item.content.dataType" placeholder="选择发射类型" class="blank-input m-10"
									@change="dataTypeChange(item.id)" style="width:100px;">
									<el-option v-for="item in dataTypes" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
							<!-- <div class="lh-40 w-30 t-rihgt">内容:</div>
							<el-select v-model="item.content.dataType" placeholder="选择发射类型" class="blank-input m-10"
								@change="dataTypeChange(item.id)" style="width:100px;">
								<el-option v-for="item in dataTypes" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select> -->
						</div>
					</div>
					<div class="station-li" style="margin-top: 10px;">
						<div class="flex p_20">
							<div v-if="item.content.dataType == 2">
								<el-input style="width: 400px;" v-model="item.content.data" maxlength="30"
									@keyup.enter="send"></el-input>
							</div>
							<div v-if="item.content.dataType == 1">
								<el-form-item label="上传音频:" >
									<img src="@/assets/img/upload-2.png" @click="uploadAudio(item.id)"
										style="width: 25px;height: 25px;margin-left: 5px;vertical-align: super;">
									<audio v-if="item.content.audioSrc" controls
										style=" height: 40px;margin-left: 30px;" :src="item.content.audioSrc"></audio>
								</el-form-item>

								<!-- <div class="flex-right audio-button2 cursor" @click="uploadAudio(item.id)">
									<div class="flex">
										<div class="flex-s">上传音频
											<img src="@/assets/img/upload-2.png"
												style="width: 20px;height: 20px;margin-left: 5px;">
										</div>
										<audio v-if="item.content.audioSrc" controls style=" height: 40px;"
											:src="item.content.audioSrc"></audio>
									</div>

								</div> -->
							</div>
						</div>
					</div>
				</div>

			</el-collapse-item>
		</el-collapse>
		<el-button class="add-item-bt" @click="addItem">+</el-button>
	</div>
</template>

<script>
export default {
	props: {
		arr: {
			type: Array,
		}
	},
	data() {
		return {
			activeNames: [], // 用于控制折叠项的展开与折叠
			items: [],
			nextId: 0, // 用于生成新折叠项的 id
			taskItem: {
				taskItemId: null,
				begin: "",
				end: "",
				timeRange: null,  //仅用于显示时间范围
				data: null,
				dataBase64: null,
				freq: 3,
				power: 2,
				channel: 0,
				sampleFreq: 12,
				encode: "none",
				mode: "SSB",
				sendTimes: 1,
				dataType: 1,  //内容类型，dataTypes 仅用于显示
				audioSrc: null, //音频源，仅用于显示
				rcvFreq: 3, // 接收频率
				rcvSampleFreq: 12, // 接收采样率
			}, // 新增数据
			dataTypes: [
				{ "label": "语音", "value": 1 },
				// { "label": "文本", "value": 2 },
			]
		};
	},
	created() {
		this.loadItems(this.arr);
	},
	watch: {
		items: {
			handler(newList) {
				//todo 输入检查
				let itemList = [];
				for (var i = 0; i < newList.length; i++) {
					if (newList[i].content.timeRange) {
						newList[i].content.begin = newList[i].content.timeRange[0];
						newList[i].content.end = newList[i].content.timeRange[1];
					}
					itemList.push(newList[i].content);
				}
				this.$emit("setItemList", itemList);
			},
			deep: true
		}
	},
	methods: {
		loadItems(newArr) {
			if (null == newArr) {
				return;
			}

			let localArr = JSON.parse(JSON.stringify(newArr))
			for (var i = 0; i < localArr.length; i++) {
				// localArr[i].timeRange = [localArr[i].begin, localArr[i].end]
				localArr[i].timeRange = [localArr[i].begin || "", localArr[i].end || ""]
				localArr[i].dataType = 1;
				localArr[i].audioSrc = localArr[i].waveUrl;
				// if (null != localArr[i].waveUrl) {
				// 	localArr[i].dataType = 1;
				// 	localArr[i].audioSrc = localArr[i].waveUrl;
				// } else {
				// 	localArr[i].dataType = 2;
				// }

				localArr[i].freq = parseFloat(localArr[i].freq) / 1000000;
				localArr[i].sampleFreq = parseFloat(localArr[i].sampleFreq) / 1000;
				localArr[i].rcvFreq = parseFloat(localArr[i].rcvFreq) / 1000000;
				localArr[i].rcvSampleFreq = parseFloat(localArr[i].rcvSampleFreq) / 1000;

				this.items.push({ id: this.nextId, content: localArr[i] });
				this.nextId++;
			}
		},
		addItem() {
			let ti = {};
			if (this.items && this.items.length > 0) {
				ti = JSON.parse(JSON.stringify(this.items[this.items.length - 1].content))
			} else {
				ti = JSON.parse(JSON.stringify(this.taskItem))
			}
			delete ti.taskItemId;
			this.items.push({ id: this.nextId, content: ti });
			this.nextId++;
			console.log(this.items)
		},
		removeItem(index) {
			this.items.splice(index, 1);
		},
		handleCollapseChange(activeNames) {
			this.activeNames = activeNames;
		},
		dataTypeChange(id) {
			this.items.forEach(item => {
				if (item.id == id) {
					if (item.content.dataType == 1) {
						item.content.audioSrc = null;
						item.content.dataBase64 = null;
					} else {
						item.content.data = null;
					}
				}
			});
		},
		uploadAudio(id) {
			const fileInput = document.createElement('input');
			fileInput.type = 'file';
			fileInput.accept = 'audio/*';
			fileInput.addEventListener('change', (event) => {
				const file = event.target.files[0];

				if (file) {
					const reader = new FileReader();
					reader.onload = () => {
						this.items.forEach(item => {
							if (item.id == id) {
								item.content.audioSrc = reader.result;
								const base64Data = reader.result.split(',')[1];
								item.content.dataBase64 = base64Data;
							}
						});
					};
					reader.readAsDataURL(file);
				}
			});

			fileInput.click();
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.add-item-bt {
	width: 80px;
	height: 36px;
	background-color: #46E5CB;
	border-radius: 42px 42px 42px 42px;
	margin-right: 20px;
	margin-top: 5px;
	border: none;
	float: right;
}

.el-collapse {
	border: none;
}

.el-collapse-item {
	background: #070C1A;
}

.el-collapse-item ::v-deep.el-collapse-item__header {
	background: none;
	border: none;
	border-radius: 50px;
	color: white;
	position: relative;
}

.el-range-editor.el-input__inner {
	background: #394760;
	border: none;
	border-radius: 50px;
	color: white;
}

.el-input-number ::v-deep.el-input__inner {
	text-align: left !important;
}

.el-collapse-item ::v-deep.el-collapse-item__arrow {
	margin: 0 50px 0 auto;
}

.el-range-editor--medium ::v-deep.el-range-input {
	background: #394760;
	border: none;
	color: white;
}

.el-date-editor ::v-deep.el-range-separator {
	color: white;
}

.el-collapse-item ::v-deep.el-collapse-item__wrap {
	background: #070C1A;
}

.unit {
	font-size: 14px;
	color: #9A9DAA;
	position: absolute;
	left: 111px;
	white-space: nowrap;
}

.flex {
	.el-form-item {
		flex: 1;
		position: relative;
	}
}
</style>